<template>
  <div class="container">
    <img :src="book.img" alt="" />
    <div>
      <h3>{{ book.name }}</h3>
      <p>
        <span>￥ {{ book.price / 100 }} </span
        ><span class="old">￥ {{ book.oldPrice / 100 }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(["book"]);

const book = props.book;
</script>

<style scoped>
.container {
  width: 300px;
  background-color: #fff;
  text-align: center;
}

.container:hover {
  box-shadow: 0 0 10px #ccc;
}
.container > div {
  padding: 10px;
}

.container .old {
  text-decoration: line-through;
  color: #ccc;
}
</style>
